﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Prettybox JQuery Plugin</title>
    <script src="jquery-1.7.js" type="text/javascript" > </script>
    <script src="jquery-ui-1.8.16.js" type="text/javascript"> </script>
    <script src="jQuery.tmpl.js" type="text/javascript"> </script>
    <link href="themes/grey/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="jquery.prettybox/jquery.prettybox.js"> </script>
    <link href="jquery.prettybox/jquery.prettybox.css" rel="stylesheet" type="text/css" />

</head>
<body>
    
    
    <style>
    body {
    color: #232323;
    font-family: Verdana,Tahoma,Arial,"Helvetica Neue",Helvetica,Sans-Serif;
    font-size: 75%;
}
    .description-cell
    {
        float:left; 
        display:inline-block; 
        margin-right:20px;
        width:300px;
    }
    .sample-cell
    {
        float:left; 
        display:inline-block; 
    }
    .sample-row
    { 
          padding:8px;
    }
    .prettybox-wrapper
    {
        vertical-align:top;
    }
    table
    {
        border-collapse:collapse;
    }
    table,th, td
    {
        border: 1px solid grey;
    }
    td
    {
        padding: 4px;
    }
    </style>
    <h1>Prettybox JQuery Plugin</h1>
    <div>
        This pluggin renders multi-select HTML element as box with selectable items.
        Plugin uses JQuery UI CSS themes and can be customized by your custom <a href="http://api.jquery.com/jquery.tmpl/">JQuery Templates</a> and CSS.
    </div>
    <div>
        <img src="prettybox_dia.png" />
    </div>
    <h2>Prettybox Options</h2>
    <div>
        <table class="options-table"> 
            <thead>
                <tr>
                    <th>Option</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>
        <tbody>
            <tr>
                <td>prettyBoxTemplateName</td> 
                <td>'prettyBoxTemplate'</td>  
                <td>JQuery Template compiled template name which uses to render box</td>
            </tr>
            <tr>
                <td>hideSelect</td>
                <td>true</td>
                <td>Hide initial select html element</td>
            </tr>
            <tr>
                <td>boxTitle</td>
                <td>'No title'</td>
                <td>Box title</td>
            </tr>
            <tr>
                <td>boxEmptyMessage</td>
                <td>'Nothing selected'</td>
                <td>Message for empty box  </td>
            </tr>
            <tr>
                <td>dropdownEmptyMessage</td>
                <td>'Nothing to select'</td>
                <td>message for empty dropdown</td>
            </tr>
            <tr>
                <td>selectButtonCaption</td>
                <td>'Select'</td>
                <td>Box select button caption</td>
            </tr>
            <tr>
                <td>closeDropdownOnOuterClick</td>
                <td>true</td>
                <td>close dropdown by clicking out of box (html.click() subscription)</td>
            </tr>
             <tr>
                <td>boxMinWidth</td>
                <td>'200px'</td>
                <td>Min box width</td>
            </tr>
            <tr>
                <td>dropdownWidth</td>
                <td>'300px'</td>
                <td>Dropdown width</td>
            </tr>
        </tbody>
        </table>
    </div>

    <h2>Demo</h2>
    <div class="ui-helper-clearfix sample-row">
        <div class="description-cell">
            <div>
                Prettybox created with default settings. This also sample of long items select. 
            </div>
<pre>        
function () {
    $('#long_color').prettybox();
}   
</pre>
        </div>
        <div class="sample-cell">
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#long_color').prettybox();
                });
                </script>
                <select id="long_color" multiple="multiple" name="long_color" >
                    <option value="White" selected="selected">Completly absolutely totaly whity white</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Red" selected="selected">Red </option>
                    <option value="Black">Black</option>
                    <option value="Blue">Blue</option>
                    <option value="Gold">Gold</option>
                    <option value="Silver" selected="selected">Silver</option>
                    <option value="Navy">Navy</option>
                </select>
        </div>
    </div>

    <div class="ui-helper-clearfix sample-row">
        <div class="description-cell">
            <div>
                Prettybox created with custom settings. It don't hide initial select element.
            </div>
<pre>        
$('#color').prettybox({
    boxTitle: 'Color',
    boxEmptyMessage: 'Any',
    boxWidth: '300px',
    dropdownWidth: '400px',
    hideSelect:false
}); 
</pre>
        </div>
        <div class="sample-cell">
            <script type="text/javascript">
                $(document).ready(
                        function () {
                            $('#color').prettybox({
                                boxTitle: 'Color',
                                boxEmptyMessage: 'Any',
                                boxMinWidth: '300px',
                                dropdownWidth: '400px',
                                hideSelect: false
                            });
                        }
                    );
                </script>
                <select class="ss-multiselect" id="color" multiple="multiple" disabled="true" style="width:150px; margin-right:10px; height:150px; vertical-align:top;">
                        <option value="Yellow">Yellow</option>
                        <option value="Red" selected="selected">Red</option>
                        <option value="Black">Black</option>
                        <option value="Blue">Blue</option>
                        <option value="White">White</option>
                        <option value="Gold">Gold</option>
                        <option value="Silver" selected="selected">Silver</option>
                        <option value="Navy">Navy</option>
                    </select>
        </div>
    </div>

    <div class="ui-helper-clearfix sample-row">
        <div class="description-cell">
            <div>
               Set of prettyboxes.
            </div>
<pre>        
$('.group1').prettybox();
</pre>
        </div>
        <div class="sample-cell" style="vertical-align:top">
            <script type="text/javascript">
                $(document).ready(
                        function () {
                            $('.group1').prettybox();
                        }
                    );
                </script>
                <select class="group1" id="Select5" multiple="multiple">
                    <option value="Yellow">Yellow</option>
                    <option value="Red" selected="selected">Red</option>
                    <option value="Black">Black</option>
                    <option value="Blue">Blue</option>
                    <option value="White">White</option>
                    <option value="Gold">Gold</option>
                    <option value="Silver" selected="selected">Silver</option>
                    <option value="Navy">Navy</option>
                </select>
                <select class="group1" id="Select6" multiple="multiple">
                    <option value="Yellow">Yellow</option>
                    <option value="Red" selected="selected">Red</option>
                    <option value="Black">Black</option>
                    <option value="Blue">Blue</option>
                    <option value="White">White</option>
                    <option value="Gold">Gold</option>
                    <option value="Silver" selected="selected">Silver</option>
                    <option value="Navy">Navy</option>
                </select>
                <select class="group1" id="Select7" multiple="multiple">
                    <option value="Yellow">Yellow</option>
                    <option value="Red" selected="selected">Red</option>
                    <option value="Black">Black</option>
                    <option value="Blue">Blue</option>
                    <option value="White">White</option>
                    <option value="Gold">Gold</option>
                    <option value="Silver" selected="selected">Silver</option>
                    <option value="Navy">Navy</option>
                </select>
                <select class="group1" id="Select8" multiple="multiple">
                    <option value="Yellow">Yellow</option>
                    <option value="Red" selected="selected">Red</option>
                    <option value="Black">Black</option>
                    <option value="Blue">Blue</option>
                    <option value="White">White</option>
                    <option value="Gold">Gold</option>
                    <option value="Silver" selected="selected">Silver</option>
                    <option value="Navy">Navy</option>
                </select>
        </div>
    </div>

</body>
</html>
